/**
 * 枚举系统使用示例
 * 
 * 使用方法：
 * 1. 在组件中直接调用工具函数
 * 2. 使用组合式函数 useEnum
 * 3. 使用Pinia store直接访问
 */

import { ref, onMounted } from 'vue'
import { 
  getEnumListByTypeList, 
  getEnumListByTypeLists,
  getEnumLabel,
  getEnumValue,
  useEnum,
  getEnumMap,
  getEnumOptions
} from '@/utils/enum'

// 示例1: 在组件中使用工具函数
export function useStationEnable() {
  const stationEnableList = ref([])
  const loading = ref(false)

  const loadStationEnable = async () => {
    loading.value = true
    try {
      stationEnableList.value = await getEnumListByTypeList('stationEnable')
    } finally {
      loading.value = false
    }
  }

  onMounted(() => {
    loadStationEnable()
  })

  return {
    stationEnableList,
    loading,
    reload: loadStationEnable
  }
}

// 示例2: 使用组合式函数
export function useDeviceStatus() {
  const {
    enumList: deviceStatusList,
    isLoaded,
    isLoading,
    error,
    load,
    getLabel,
    toMap,
    toOptions
  } = useEnum('deviceStatus')

  return {
    deviceStatusList,
    isLoaded,
    isLoading,
    error,
    load,
    getDeviceStatusLabel: getLabel,
    deviceStatusMap: toMap,
    deviceStatusOptions: toOptions
  }
}

// 示例3: 批量加载枚举
export function useMultipleEnums() {
  const enums = ref({})
  const loading = ref(false)

  const loadEnums = async () => {
    loading.value = true
    try {
      enums.value = await getEnumListByTypeLists([
        'stationEnable',
        'stationType',
        'deviceStatus',
        'orderStatus'
      ])
    } finally {
      loading.value = false
    }
  }

  onMounted(() => {
    loadEnums()
  })

  return {
    enums,
    loading,
    reload: loadEnums
  }
}

// 示例4: 使用枚举值转换
export function useEnumTransform() {
  const getStatusLabel = (status: string | number) => {
    return getEnumLabel('stationEnable', status)
  }

  const getStatusValue = (label: string) => {
    return getEnumValue('stationEnable', label)
  }

  return {
    getStatusLabel,
    getStatusValue
  }
}

// 示例5: 在模板中使用
/*
<template>
  <!-- 示例1: 使用工具函数 -->
  <div v-for="item in stationEnableList" :key="item.value">
    {{ item.label }} - {{ item.value }}
  </div>

  <!-- 示例2: 使用组合式函数 -->
  <el-select v-model="form.deviceStatus">
    <el-option
      v-for="item in deviceStatusOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>

  <!-- 示例3: 显示枚举标签 -->
  <tag :type="getDeviceStatusLabel(device.status)">
    {{ getDeviceStatusLabel(device.status) }}
  </tag>
</template>

<script setup lang="ts">
import { useStationEnable, useDeviceStatus, useMultipleEnums } from '@/composables/useEnumExample'

// 使用示例1
const { stationEnableList } = useStationEnable()

// 使用示例2
const { deviceStatusOptions, getDeviceStatusLabel } = useDeviceStatus()

// 使用示例3
const { enums } = useMultipleEnums()
</script>
*/